<template>
  <div id="line1">
    <div
      v-if="reload"
      ref="line1"
      :x_data="x_data"
      :y1_data="y1_data"
      :y2_data="y2_data"
      :y3_data="y3_data"
      :y4_data="y4_data"
      :flow_chartxx="flow_chartxx"
    ></div>
  </div>
</template>

<script>
export default {
  props: {
    x_data: Array | Object,
    y1_data: Array | Object,
    y2_data: Array | Object,
    y3_data: Array | Object,
    y4_data: Array | Object,
    flow_chartxx: Array | Object,
    name1: String,
    name2: String,
    name3: String,
    name4: String,
    size: String | Number,
    grid_line: String,
    line_color: String,
    line_style: String,
    font_color: String,
    format_0: String,
    formatter: String | Number
  },
  components: {},
  data() {
    return {
      reload: true
    };
  },
  computed: {
    listen_change() {
      const { x_data, y1_data, y2_data, y3_data, y4_data } = this;
      return {
        x_data,
        y1_data,
        y2_data,
        y3_data,
        y4_data
      };
    }
  },
  watch: {},
  created() {
    this.$watch('listen_change', function (newValue, oldValue) {
      this.draw();
    });
  },
  mounted() {
    this.draw();
  },

  methods: {
    draw() {
      let that = this;
      let y1data = that.y1_data.some(item => {
        return item != 0;
      });
      let y1data1 = that.y2_data.some(item => {
        return item != 0;
      });
      let y1data2 = that.y3_data.some(item => {
        return item != 0;
      });
      let y1data3 = that.y4_data.some(item => {
        return item != 0;
      });
      let namedata = [];
      if (y1data) {
        namedata.push(this.name1);
      }

      if (y1data1) {
        namedata.push(this.name2);
      }

      if (y1data2) {
        namedata.push(this.name3);
      }
      if (y1data3) {
        namedata.push(this.name4);
      }

      let my_chart = that.$echarts.init(that.$refs.line1);
      let option = {
        tooltip: {
          axisPointer: {
            type: 'line' // 默认为直线，可选为：'line' | 'shadow'
          },
          trigger: 'axis',

          formatter: function (params) {
            let result = '';
            let result1 = '';

            params.forEach(item => {
              if (that.flow_chartxx) {
                var date = new Date(that.flow_chartxx[item.dataIndex] * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
                var year = date.getFullYear(),
                  month = ('0' + (date.getMonth() + 1)).slice(-2),
                  sdate = ('0' + date.getDate()).slice(-2),
                  hour = ('0' + date.getHours()).slice(-2),
                  minute = ('0' + date.getMinutes()).slice(-2),
                  second = ('0' + date.getSeconds()).slice(-2);
                // 拼接
                result1 =
                  year + '-' + month + '-' + sdate + ' ' + hour + ':' + minute + ':' + second;
              }

              result += item.marker + item.seriesName + '：' + item.value + '%' + '</br>';
            });
            return result1 + '</br>' + result;
            //   var result = "";
            //   if (that.formatter == 1) {
            //     params.forEach(function (item) {
            //       result +=
            //         item.marker +
            //         " " +
            //         item.seriesName +
            //         " : " +
            //         (that.format_0 ? that.format_0 : item.value) +
            //         "</br>";
            //     });
            //   } else if (that.formatter == 2) {
            //     params.forEach(function (item) {
            //       result +=
            //         item.marker +
            //         " " +
            //         item.seriesName +
            //         " : " +
            //         (that.format_0 ? that.format_0 : item.value * 100 + "%") +
            //         "</br>";
            //     });
            //   } else if (that.formatter == 3) {
            //     params.forEach(function (item, index) {
            //       if (index == 2) {
            //         result +=
            //           item.marker +
            //           " " +
            //           item.seriesName +
            //           " : " +
            //           (that.format_0 ? that.format_0 : item.value) +
            //           "%</br>";
            //       } else {
            //         result +=
            //           item.marker +
            //           " " +
            //           item.seriesName +
            //           " : " +
            //           (that.format_0 ? that.format_0 : item.value) +
            //           "</br>";
            //       }
            //     });
            //   } else if (that.formatter == 4) {
            //     params.forEach(function (item, index) {
            //       if (index == 2) {
            //         // 如果转化率>500 显示--
            //         let rate = 0;
            //         if (item.value > 500) {
            //           rate = "--";
            //         } else {
            //           rate = item.value + "%";
            //         }
            //         result +=
            //           item.marker +
            //           " " +
            //           item.seriesName +
            //           " : " +
            //           rate +
            //           "</br>";
            //       } else {
            //         result +=
            //           item.marker +
            //           " " +
            //           item.seriesName +
            //           " : " +
            //           (that.format_0 ? that.format_0 : item.value) +
            //           "</br>";
            //       }
            //     });
            //   }
            // return  item.marker +params[0].seriesName+ params[0].value+"</br>" +  item.marker +params[1].seriesName+ params[1].value+"</br>"+ item.marker +params[3].seriesName+ params[3].value+"</br>"+ item.marker +params[4].seriesName+ params[4].value+"</br>";
          }
        },

        grid: {
          top: '15%', // 组件离容器上侧的距离,百分比字符串或整型数字
          left: '15%', // 组件离容器左侧的距离,百分比字符串或整型数字
          right: '10%',
          bottom: '15%',
          containLabel: false //grid 区域是否包含坐标轴的刻度标签，
          // top: "15%", // 组件离容器上侧的距离,百分比字符串或整型数字
          // left: "5%", // 组件离容器左侧的距离,百分比字符串或整型数字
          // right: "15%",
          // bottom: "3%",
          // containLabel: true, //grid 区域是否包含坐标轴的刻度标签，
        },
        xAxis: {
          type: 'category',
          //坐标轴两边留白
          boundaryGap: false,
          data: that.x_data,
          //设置网格线颜色
          splitLine: {
            show: that.grid_line === 'false' ? false : true,
            lineStyle: {
              color: 'rgba(195,202,223,.3)',
              width: 1,
              type: 'solid'
            }
          },
          axisTick: {
            show: false
          },
          // x轴样式
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: 'rgba(195,202,223,.3)', //左边线的颜色
              width: '2' //坐标线的宽度
            }
          },
          // x轴字体样式
          axisLabel: {
            show: true,
            margin: 14,
            textStyle: {
              // color:that.font_color ,
              color: 'rgba(195,202,223,.5)',
              // color: that.font_color ? that.font_color : "#555555",
              // fontFamily: "DINAlternate-Bold",
              fontSize: 12
            }
          }
        },
        yAxis: [
          {
            // name: "百分比",
            type: 'value',
            min: that.line_style ? 100 : null,
            minInterval: 1,
            // 设置网格线颜色
            splitLine: {
              show: true,
              lineStyle: {
                // color: ["#abe7ff"],
                color: ['rgba(171,231,255,0.1)'],
                width: 1,
                type: 'solid',
                option: 0.7
              }
            },
            axisLabel: {
              show: true,
              margin: 14,
              textStyle: {
                color: 'rgba(195,202,223,.5)',
                // color: that.font_color ? that.font_color : "#555555",
                // fontFamily: "DINAlternate-Bold",
                fontSize: 12
              },
              formatter: function (value) {
                if (that.formatter == 1 || that.formatter == 3) {
                  // return that.format_num(value);
                  return value + '%';
                } else if (that.formatter == 2) {
                  return value * 100 + '%';
                }
              }
            },
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                type: 'solid',
                // color: '#666', //左边线的颜色
                color: 'rgba(195,202,223,.3)', //左边线的颜色
                width: '1' //坐标线的宽度
              }
            }
          },
          {
            type: 'value',
            min: that.line_style ? 100 : null,
            minInterval: 1,
            //设置网格线颜色
            splitLine: {
              show: that.grid_line === 'false' ? false : true,
              lineStyle: {
                color: ['#e5e5e5'],
                width: 1,
                type: 'solid'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              margin: 14,
              show: false,
              textStyle: {
                // color: that.font_color ? that.font_color : "#fff",
                // fontFamily: "DINAlternate-Bold",
                color: 'rgba(195,202,223,.5)',
                fontSize: 12
              },
              formatter: function (value) {
                if (that.formatter == 1 || that.formatter == 3) {
                  return that.format_num(value);
                } else if (that.formatter == 2) {
                  return value * 100 + '%';
                }
              }
            },
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: 'rgba(195,202,223,.3)', //左边线的颜色
                // color: that.line_color, //左边线的颜色
                width: '0' //坐标线的宽度
              }
            }
          }
        ],
        legend: {
          data: namedata,
          padding: [12, 0, 0, 0],
          itemGap: 20,
          //  pageButtonItemGap : 115,
          textStyle: {
            color: '#c3cadf'
            // rich: {
            //   b: { color: "red" },
            // },
          },
          icon: 'rect',
          // rich: {
          //   b: { color: "red" },
          // },
          itemHeight: 2, //修改icon图形大小
          itemWidth: 14 //修改icon图形大小
        },
        series: [
          {
            //  showSymbol: true,
            name: that.name1,
            data: y1data ? that.y1_data : '',
            // data:that.y1_data,
            type: 'line',
            // animation: true,
            smooth: true, //true 为平滑曲线，false为直线
            symbolSize: 0, //折线点的大小
            areaStyle: {
              normal: {
                //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgba(62,134,233,.3)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(62,134,233,.3)'
                  }
                ])
              }
            },
            itemStyle: {
              normal: {
                color: '#4f99ff', //改变折线点的颜色
                shadowBlur: 16,
                shadowColor: 'rgba(253,127,44,.3)',
                lineStyle: {
                  type: that.line_style ? that.line_style : 'solid', //'dotted'虚线 'solid'实线
                  color: '#4f99ff', //改变折线颜色
                  width: 2
                }
              }
            },
            yAxisIndex: 0
          },
          {
            name: that.name2,
            data: that.y2_data,
            type: 'line',
            smooth: true, //true 为平滑曲线，false为直线
            symbolSize: 0, //折线点的大小
            areaStyle: {
              normal: {
                //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgba(77,65,78,.3)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(77,65,78,.3)'
                  }
                ])
              }
            },
            itemStyle: {
              normal: {
                color: '#ee843f', //改变折线点的颜色
                shadowBlur: 16,
                shadowColor: '#1779ff',
                lineStyle: {
                  type: that.line_style ? that.line_style : 'solid', //'dotted'虚线 'solid'实线
                  color: '#ee843f', //改变折线颜色
                  width: 2
                }
              }
            },
            yAxisIndex: 0
          },
          {
            name: that.name3,
            data: that.y3_data,
            type: 'line',
            smooth: true, //true 为平滑曲线，false为直线
            symbolSize: 0, //折线点的大小
            areaStyle: {
              normal: {
                //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgba(46,76,105,.3)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(46,76,105,.3)'
                  }
                ])
              }
            },
            itemStyle: {
              normal: {
                color: '#3cb2c0', //改变折线点的颜色
                shadowBlur: 16,
                shadowColor: '#06f0ab',
                lineStyle: {
                  type: that.line_style ? that.line_style : 'solid', //'dotted'虚线 'solid'实线
                  color: '#3cb2c0', //改变折线颜色
                  width: 2
                }
              }
            },
            yAxisIndex: 0
          },
          {
            name: that.name4,
            data: that.y4_data,
            type: 'line',
            smooth: true, //true 为平滑曲线，false为直线
            symbolSize: 0, //折线点的大小
            areaStyle: {
              normal: {
                //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#4b5367'
                  },
                  {
                    offset: 1,
                    color: '#273151'
                  }
                ])
              }
            },
            itemStyle: {
              normal: {
                color: '#f3ac62', //改变折线点的颜色
                shadowBlur: 16,
                shadowColor: '#06f0ab',
                lineStyle: {
                  type: that.line_style ? that.line_style : 'solid', //'dotted'虚线 'solid'实线
                  color: '#f3ac62', //改变折线颜色
                  width: 2
                }
              }
            },
            yAxisIndex: 0
          }
        ]
      };
      my_chart.setOption(option);

      // if (that.line_style) {
      //   my_chart.setOption({
      //     graphic: {
      //       type: "image",
      //       bounding: "raw",
      //       top: "70%",
      //       left: "15%"
      //       // style: {
      //       //   image:
      //       //     "",
      //       //   width: "147",
      //       //   height: "32",
      //       // },
      //     }
      //   });
      // } else {
      //   my_chart.setOption({
      //     graphic: {
      //       type: "image",
      //       bounding: "raw",
      //       top: "70%",
      //       left: "15%"
      //       // style: {
      //       //   image:
      //       //     "",
      //       //   width: "70",
      //       //   height: "30",
      //       // },
      //     }
      //   });
      // }

      let resizeFn = function () {
        my_chart.resize();
      } 
      window.addEventListener('resize',resizeFn);
      this.$once('hook:beforeDestroy', () => {
        my_chart.dispose();
        my_chart = null;
        window.removeEventListener('resize',resizeFn);
      });
    }
  }
};
</script>
<style lang="less" scoped>
#line1 {
  div {
    width: 100%;
    height: 100%;
  }
}
</style>
